<template>
	<view class="bg-gray1">
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">
				<text v-if="showType">搜索</text>
				<text v-if="!showType">商品列表</text>
			</block>
		</cu-custom>
		<!-- 上部搜索 -->
		<view class="cu-bar search fixed goods-search bg-gradual-lightPink1">
			<view class="search-form round" style="width: 70rpx;height: 70rpx;">
				<text class="cuIcon-search"></text>
				<input v-model="searchKeyword" type="text" placeholder="请输入商品名称或编码" confirm-type="search"
					@confirm="searchHandle" @focus="inputFocus" style="font-size: 28rpx;"></input>
				<view class="cu-btn round bg-gradual-orange1" style="margin-right: 20rpx;height: 55rpx;"
					@click="searchClick">搜索</view>
			</view>
		</view>
		<!-- 1、历史搜索记录 -->
		<view v-if="searchHistory.length > 0 && showType" style="margin-top: 100rpx">
			<view class="cu-bar bg-white" style="align-items: flex-end;min-height: 70rpx;">
				<view class="action">
					<text class="cuIcon-time" style="margin:0"></text>
					<text class="margin-left-xs">历史搜索</text>
				</view>
				<view class="action">
					<text class="cuIcon-delete lg text-gray" @tap="clearSearchHistory"></text>
				</view>
			</view>
			<view class="padding-sm flex flex-wrap bg-white">
				<view class="padding-xs" v-for="(item, index) in searchHistory" :key="index">
					<view class="cu-tag round" @tap="searchHandle" :data-name="item.name">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 2、商品列表 -->
		<view class="" v-if="!showType" style="margin-top: 120rpx">
			<view v-if="viewType && goodsList.length>0">
				<view v-for="(item,index) in goodsList" :key="index" style="margin:20rpx">
					<goods-card :goodsInfo="item" :value="newData" v-if="item&&item.skus"></goods-card>
				</view>
			</view>
			<view :class="'cu-load bg-gray ' + (loadmore?'loading':'over')"></view>
		</view>
	</view>
</template>

<script>
	const util = require("utils/util.js");
	const app = getApp();
	import api from 'utils/api'
	import goodsCard from "components/goods-card/index";
	import goodsRow from "components/goods-row/index";

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				page: {
					searchCount: false,
					current: 1,
					size: 10,
					ascs: '',
					//升序字段
					descs: ''
				},
				parameter: {
					shopId: ''
				},
				loadmore: true,
				goodsList: [],
				viewType: true,
				price: '',
				sales: '',
				createTime: '',
				title: '',
				searchHistory: [],
				searchKeyword: '',
				showType: false, // 显示商品列表 或 搜索历史记录
				newData: {
					background: '#ffffff',
					pageUpSpacing: "10",
					paddingLRSpacing: "20",
					pageGoodsSpacing: "20",
					pageLRSpacing: "20",
					pageUDSpacing: "30",
					pageSpacing: 0,
					goodsList: []
				}
			};
		},

		components: {
			goodsCard,
			goodsRow
		},

		onLoad(options) {

			let title = options.title ? decodeURI(options.title) : '默认';

			this.title = title;
			
			if(options.searchKeyWord){
				this.parameter.codeOrName = options.searchKeyWord
				this.loadmore = true;
				this.goodsList = [];
				this.page.current = 1;
			}

			if (options.showHistory) {
				this.showType = options.showHistory
			}

			if (options.categoryFirst) {
				this.parameter.categoryFirst = options.categoryFirst;
			}

			if (options.categorySecond) {
				this.parameter.categorySecond = options.categorySecond;
			}

			if (options.categoryShopFirst) {
				this.parameter.categoryShopFirst = options.categoryShopFirst;
			}

			if (options.categoryShopSecond) {
				this.parameter.categoryShopSecond = options.categoryShopSecond;
			}

			if (options.name) {
				this.parameter.name = options.name;
			}

			if (options.type) {
				if (options.type == '1') {
					this.title = '新品首发';
					this.page.descs = 'create_time';
				}

				if (options.type == '2') {
					this.title = '热销单品';
					this.page.descs = 'sale_num';
				}
			}

			if (options.couponUserId) {
				// this.parameter.couponUserId = options.couponUserId;
				this.parameter.setid = options.couponUserId;
			}

			
		},
		onShow() {
			this.searchHistory = uni.getStorageSync('searchHistory') ? uni.getStorageSync('searchHistory') : [],
			app.initPage().then(res => {
				if (!this.showType) {
					this.relod();
				}
			});
		},
		onReachBottom() {
			if (this.loadmore) {
				this.page.current = this.page.current + 1;
				this.goodsPage();
			}
		},

		methods: {
			// 点击搜索框,进入搜索模块
			inputFocus() {
				if (!this.showType) {
					this.showType = true
					// this.searchKeyword = ''
				}
			},
			searchClick() {
				if (this.searchKeyword && this.searchKeyword.length > 0) {
					this.searchHandle({
						detail: {
							value: this.searchKeyword
						}
					});
				}
			},
			searchHandle(e) {
				let value;

				if (e.detail.value) {
					value = e.detail.value;
				} else if (e.currentTarget.dataset.name) {
					value = e.currentTarget.dataset.name;
				}

				let searchHistory = this.searchHistory;
				searchHistory.forEach(function(item, index) {
					let i = 9; //最多缓存10条

					if (item.name == value) {
						searchHistory.splice(index, 1);
						i++;
					}

					if (index >= i) {
						searchHistory.splice(index, 1);
					}
				});
				searchHistory.unshift({
					name: value
				});
				uni.setStorageSync('searchHistory', searchHistory);
				this.parameter.codeOrName = value
				this.searchKeyword = value
				this.goodsList = []
				this.showType = false
				this.goodsPage()

				// uni.navigateTo({
				// 	url: '/pages/goods/goods-list/index?name=' + value
				// });

			},

			clearSearchHistory() {
				let that = this;
				uni.showModal({
					content: '确认删除全部历史记录？',
					cancelText: '我再想想',
					confirmColor: '#ff0000',
					success(res) {
						if (res.confirm) {
							that.searchHistory = [];
							uni.setStorageSync('searchHistory', []);
						}
					}

				});
			},
			goodsPage() {
				const clientType = uni.getStorageSync("clientType");
				const value = uni.getStorageSync('address');
				if (value) {
					this.parameter.latitude = value.latitude;
					this.parameter.longitude = value.longitude;
				}
				if (this.parameter.setid) {
					console.log(this.parameter.setid)
					api.goodsPage3(Object.assign({}, this.page, util.filterForm(this.parameter))).then(res => {
						let goodsList = res.data.records;
						this.goodsList = [...this.goodsList, ...goodsList];
						if (goodsList.length < this.page.size) {
							this.loadmore = false;
						}
					});
				} else {
					delete this.parameter.setid
					api.goodsPage(Object.assign({}, this.page, util.filterForm(this.parameter))).then(res => {
						let goodsList = res.data.records;
						this.goodsList = [...this.goodsList, ...goodsList];
						if (goodsList.length < this.page.size) {
							this.loadmore = false;
						}
					});
				}

			},

			viewTypeEdit() {
				this.viewType = !this.viewType;
			},

			relod() {
				this.loadmore = true;
				this.goodsList = [];
				this.page.current = 1;
				this.goodsPage();
			}

		}
	};
</script>
<style scoped>
	.goods-search {
		top: unset !important;
		min-height: 100rpx !important
	}

	.goods-nav {
		top: unset !important;
		margin-top: 100rpx;
	}

	.cuIcon-triangledownfill {
		margin-top: -22rpx
	}
</style>